<script setup lang="ts">
import {onMounted, ref} from "vue";
import {
  DelSecretKey,
  DelText,
  GetSecretKeyList,
  GetTextList
} from "../../../../wailsjs/go/view/SecretText";
import AddKeyDialog from "../components/AddKeyDialog.vue";
import AddTextDialog from "../components/AddTextDialog.vue";
import {Plus, Operation, Download} from "@element-plus/icons-vue";
import {tables} from "../../../../wailsjs/go/models.ts";
import {useBaseStore} from "@/stores/base.ts";
import {ElMessage, ElMessageBox} from "element-plus";
import {useRouter} from "vue-router";
import AddChapterDialog from "@/views/secret/components/AddChapterDialog.vue";
import EditTextDialog from "@/views/secret/components/editTextDialog.vue";

const router = useRouter()
const baseStore = useBaseStore()
const textTableData = ref<tables.SecretText[]>([])
const keyTableData = ref<tables.SecretKey[]>([])
const addKeyDialogRef = ref()
const addTextDialogRef = ref()
const addChapterDialogRef = ref()
const editTextDialogRef = ref()
const multipleSelection = ref<tables.SecretText[]>()
const activeName = ref("text")

onMounted(()=>{
  loadTableList()
})

const loadTableList=()=>{
  GetTextList(baseStore.showPrivate).then(res =>{
    console.log(res)
    textTableData.value = res
  })
  GetSecretKeyList().then(res =>{
    keyTableData.value = res
  })
}
const clickAddTextBtn = ()=>{
  addTextDialogRef.value.dialogVisible = true
}
const clickAddKeyBtn = ()=>{
  addKeyDialogRef.value.dialogVisible = true
}
const clickShowPrivate = ()=>{
  if ( baseStore.showPrivate ){
    baseStore.showPrivate = false
    loadTableList()
    return
  }
  ElMessageBox.prompt('请输入密码', 'Tip', {
    confirmButtonText: '提交',
    cancelButtonText: '取消',
  })
    .then(({ value }) => {
      if ( value == baseStore.privateSecret ){
        baseStore.showPrivate = true
        loadTableList()
      }else {
        ElMessage({
          message: '密码不正确!',
          type: 'warning',
        })
      }
    })
}

const handleSelectionChange = (val:tables.SecretText[])=>{
  multipleSelection.value = val
}
const handleTabsClick = ()=>{
  multipleSelection.value = []
}
const clickDelTextBtn = ()=>{
  ElMessageBox.prompt('请输入密码', 'Tip', {
    confirmButtonText: '提交',
    cancelButtonText: '取消',
  })
    .then(({ value }) => {
      multipleSelection.value?.forEach(item =>{
        DelText(item.id,value)
      })
    })
}

const clickWatchBtn = (row:tables.SecretText)=>{
  ElMessageBox.prompt('请输入密码', 'Tip', {
    confirmButtonText: '提交',
    cancelButtonText: '取消',
  })
    .then(({ value }) => {
      console.log(value,row.adminKey)
      if (value == row.adminKey){
        sessionStorage.setItem("secretTextId",row.id.toString())
        sessionStorage.setItem("secretAdminKey",value)
        router.push('/secret/book')
      }else {
        ElMessage({
          message: '密码不正确!',
          type: 'warning',
        })
      }
    })
}
const clickAddChapterBtn = (row:tables.SecretText)=>{
  addChapterDialogRef.value.dialogVisible = true
  addChapterDialogRef.value.addForm.textId = row.id
}
const clickEditTextBtn = (row:tables.SecretText)=>{
  editTextDialogRef.value.dialogVisible = true
  editTextDialogRef.value.editForm.id = row.id
  editTextDialogRef.value.editForm.title = row.title
  editTextDialogRef.value.editForm.label = row.label
  editTextDialogRef.value.editForm.prompt = row.prompt
  editTextDialogRef.value.editForm.isPrivate = row.isPrivate
}
const clickDelKeyBtn = (row:tables.SecretKey)=>{
  DelSecretKey(row.id.toString())
  loadTableList()
}
</script>

<template>
  <div>
    <el-card>
      <EditTextDialog :onLoadSecretTextList="loadTableList" ref="editTextDialogRef"></EditTextDialog>
      <AddChapterDialog ref="addChapterDialogRef"></AddChapterDialog>
      <AddKeyDialog :onLoadSecretTextList="loadTableList" ref="addKeyDialogRef"></AddKeyDialog>
      <AddTextDialog :onLoadSecretTextList="loadTableList" ref="addTextDialogRef"></AddTextDialog>
      <div class="flex justify-between">
        <div class="flex">
          <el-button type="primary" @click="clickAddTextBtn" :icon="Plus">添加密文</el-button>
          <el-button type="primary" @click="clickAddKeyBtn" :icon="Plus">创建密钥</el-button>
        </div>
        <div class="flex justify-end">
          <el-tooltip content="还没写-导出明文文本" placement="top">
            <el-button @click="" :icon="Download" circle disabled />
          </el-tooltip>
          <el-tooltip content="还没写-切换密钥，数据会先使用旧密钥解密，然后使用新密钥加密" placement="top">
            <el-button @click="" :icon="Operation" circle disabled/>
          </el-tooltip>
          <el-tooltip content="显示隐私文件" placement="top">
            <el-button circle @click="clickShowPrivate">
              <SvgIcon name="fileShow" size="16px" v-if="baseStore.showPrivate"/>
              <SvgIcon name="fileHide" size="16px" v-else/>
            </el-button>
          </el-tooltip>
        </div>
      </div>
      <div>
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleTabsClick">
          <el-tab-pane label="密文" name="text">
            <el-table :data="textTableData" @selection-change="handleSelectionChange" style="width: 100%">
              <el-table-column type="selection" width="55" />
              <el-table-column fixed prop="title" label="名称" width="150" />
              <el-table-column prop="label" label="标签"  />
              <el-table-column label="是否加密"  >
                <template #default="scope">
                  {{ scope.row.keyId ==0 ?'明文存储':'加密存储' }}
                </template>
              </el-table-column>
              <el-table-column prop="prompt" label="密钥提示" />
              <el-table-column fixed="right" label="操作" min-width="120">
                <template #default="scope">
                  <el-button @click="clickWatchBtn(scope.row)" link type="primary" size="small" >查看</el-button>
                  <el-button @click="clickEditTextBtn(scope.row)" link type="primary" size="small" >编辑</el-button>
                  <el-tooltip content="添加章节" placement="top">
                    <el-button @click="clickAddChapterBtn(scope.row)" v-show=" scope.row.textType =='chapter' " link type="primary" size="small">添加</el-button>
                  </el-tooltip>
                  <el-tooltip content="删除选中的文本或者密钥" placement="top">
                    <el-button @click="clickDelTextBtn" link type="danger" size="small" >删除</el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="密钥" name="key">
            <el-table :data="keyTableData" @selection-change="handleSelectionChange" style="width: 100%">
              <el-table-column type="selection" width="55" />
              <el-table-column fixed prop="title" label="名称" width="150" />
              <el-table-column prop="remark" label="描述"  />
              <el-table-column  prop="algorithm" label="密钥算法"  >
                <template #default="scope">
                  {{ scope.row.algorithm =='simple' ?'明文存储':scope.row.algorithm =='AES' ?'AES':'RSA' }}
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" min-width="120">
                <template #default="scope">
                  <el-tooltip content="密钥只能新建、删除和换绑，不提供修改功能！" placement="top">
                    <el-button link type="primary" disabled size="small">修改</el-button>
                  </el-tooltip>
                  <el-tooltip content="删除密钥" placement="top">
                    <el-button @click="clickDelKeyBtn(scope.row)" link type="danger" size="small">删除</el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<style scoped lang="scss">

</style>
